<div class="container">
    <div class="head">
      <div class="head_left">
        <span>面试时间</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <nz-range-picker [nzDateRender]="tplRender"></nz-range-picker>
      <ng-template #tplRender let-current>
        <div class="ant-picker-cell-inner" [class.border]="current.getDate() === 1">
          {{ current.getDate() }}
        </div>
      </ng-template>
    </div>
      <div class="head_middle">
        <span>候选人</span><input nz-input placeholder="请输入候选人" nzSize="default" />&nbsp;&nbsp;
        <span>应聘职位</span><input nz-input placeholder="请输入应聘职位" nzSize="default" />
        <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
      </div>
      <div class="head_right">
        <button nz-button nzType="primary">安排面试</button>
        <button nz-button nzType="primary" style="background-color: #fff;color: #000">导出</button>
      </div>
    </div>

    <div class="cont">
      <nz-table #editRowTable nzBordered [nzData]="listOfData" nzTableLayout="fixed" [nzPageSize]="5" >
        <thead>
        <tr>
          <th nzWidth="5%" style="text-align: center">序号</th>
          <th nzWidth="10%" style="text-align: center">面试时间</th>
          <th nzWidth="10%" style="text-align: center">候选人</th>
          <th nzWidth="10%" style="text-align: center">联系电话</th>
          <th nzWidth="10%" style="text-align: center">面试职位</th>
          <th nzWidth="10%" style="text-align: center">面试地点</th>
          <th nzWidth="10%" style="text-align: center">招聘负责人</th>
          <th nzWidth="10%" style="text-align: center">面试官</th>
          <th nzWidth="10%" style="text-align: center">面试状态</th>
          <th nzWidth="15%" style="text-align: center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of editRowTable.data">
          <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
            <td style="text-align: center">{{ data.id }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center">{{ data.name }}</td>
            <td style="text-align: center"><a (click)="startEdit(data.id)">修改</a></td>
          </ng-container>
          <ng-template #editTemplate>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.name" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.address" /></td>
            <td>
              <a (click)="saveEdit(data.id)" class="save">Save</a>
              <a nz-popconfirm nzTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
            </td>
          </ng-template>
        </tr>
        </tbody>
      </nz-table>
    </div>
</div>
